<template>
  <div
    class="ui-date-picker"
    :class="[{'is-viewable': !editable}, 'ui-date-picker--' + type, 'ui-date-picker--' + size, { 'is-inline': isInline }]"
  >
    <template v-if="editable">
      <el-date-picker
        ref="control"
        v-model="innerValue"
        class="ui-date-picker__control"
        :class="{'is-border': border}"
        :type="type"
        :size="size"
        :format="format"
        :value-format="valueFormat"
        :picker-options="pickerOptions"
        :placeholder="placeholder"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
      />
    </template>
    <template v-else>
      <template v-if="isRange">
        {{ rangeText }}
      </template>
      <template v-else>
        {{ innerValue }}
      </template>
    </template>
  </div>
</template>
<script>
import DatePicker from 'element-ui/lib/date-picker'
import 'element-ui/lib/theme-chalk/date-picker.css'
import 'element-ui/lib/theme-chalk/icon.css'
import { parseDate } from '@/utils/date'

export default {
  name: 'UiDatePicker',
  components: {
    ElDatePicker: DatePicker
  },
  inject: {
    UiFilter: {
      default: null
    }
  },
  props: {
    value: {
      type: [String, Number, Date, Array],
      default: undefined
    },
    border: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'date'
    },
    size: {
      type: String,
      default: 'small'
    },
    format: {
      type: String,
      default: undefined
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm'
    },
    placeholder: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    startPlaceholder: {
      type: String,
      default: ''
    },
    endPlaceholder: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object
    }
  },
  data() {
    return {
      displayValue: null
    }
  },
  filter: {
    transformValue ({ value, props }) {
      if (Array.isArray(value) && props && props.type === 'daterange') {
        return value.map((v, i) => {
          const date = parseDate(v)
          if (i === 0) {
            date.setHours(0)
            date.setMinutes(0)
            date.setSeconds(0)
            date.setMilliseconds(0)
          } else {
            date.setDate(date.getDate() + 1)
            date.setHours(0)
            date.setMinutes(0)
            date.setSeconds(0)
            date.setMilliseconds(0)
          }
          return date.getTime() / 1000
        })
      } else {
        return value
      }
    }
  },
  computed: {
    isInline () {
      return !!this.UiFilter
    },
    innerValue: {
      get() {
        if (this.value) {
          if (Array.isArray(this.value)) {
            return this.value.map(v => parseDate(v) || '')
          } else {
            return parseDate(this.value)
          }
        }
        return this.value
      },
      set(val) {
        if (val) {
          if (Array.isArray(val)) {
            val = val.map(v => {
              return parseDate(v).getTime() / 1000 // 强制转成后端的秒的时间戳
            })
          } else {
            val = parseDate(val).getTime() / 1000 // 强制转成后端的秒的时间戳
          }
        }
        this.$emit('input', val)
      }
    },
    isEmpty() {
      if (this.isRange) {
        return !this.value || !this.value.length
      } else {
        return !this.value
      }
    },
    isRange() {
      return ['daterange', 'datetimerange'].includes(this.type)
    },
    rangeText() {
      if (!this.isRange) {
        return
      }
      if (!this.innerValue) {
        return
      }
      const vs = !Array.isArray(this.innerValue) ? [this.innerValue] : this.innerValue
      return vs.join(' 至 ')
    }
  },
  methods: {
    handleClearClick() {
      this.innerValue = null
    }
  }
}
</script>
<style lang="less">
.ui-date-picker__control{
  &.el-date-editor.el-input,
  &.el-date-editor.el-range-editor{
    width: 100%;
  }
  .el-range-input{
    font-size: 14px;
  }
  &:not(.is-border) {
    .el-input__inner{
      padding-left: 12px;
      border-color: transparent;
      transition: all .25s;
      background-color: transparent;
    }
    .el-input__prefix{
      display: none;
    }
    &:hover {
      .el-input__inner{
        background-color: #f8f8f9;
      }
    }
  }
  &.el-range-editor&:not(.is-border) {
    padding-left: 12px;
    border-color: transparent;
    transition: all .25s;
    .el-range__icon{
      display: none;
    }
    .el-range-input{
      background-color: transparent;
    }
    &:hover {
      background-color: #f8f8f9;
    }
  }
}
.ui-date-picker{
  font-size: 14px;
  .ui-date-picker__control{
    vertical-align: top;
  }
  .el-input__inner{
    vertical-align: top;
  }
}
.ui-date-picker--daterange{
  &.is-inline {
    width: 280px;
  }
}
&.ui-date-picker{
  &.is-viewable {
    &.ui-date-picker--medium {
      line-height: 22px;
      padding: 9px 0;
    }
    &.ui-date-picker--small {
      line-height: 22px;
      padding: 5px 0;
    }
    &.ui-date-picker--mini {
      line-height: 22px;
      padding: 3px 0;
    }
  }
}
</style>
